<template>
	<view class="addressBox">
		<n-loading></n-loading>
		<view v-if="addressListReady">
			<view class="nodata" v-if="addressList.length==0">
				<image src="../../static/svgIcon/noStore.svg" mode=""></image>
				<view class="tips">暂无收货地址~</view>
			</view>
			<u-swipe-action :show="item.handleShow" :index="index" 
				v-for="(item, index) in addressList" :key="item.id" 
				@click="clickList" @open="openList"
				:options="addressHandle" btn-width="144"
			>
				<view class="addressEach">
					<view class="addressInfoBox">
						<view class="memberName">
							<text class="mr64">{{item.name}}</text>
							<text>{{item.phone}}</text>
							<text class="addDefailt" v-if="item.is_def==1">默认</text>
						</view>
						<view class="addressInfo">{{item.address_detail}}</view>
					</view>
					<view class="editBtn" @tap="editAddress(item.id)">
						<u-icon name="edit-pen" color="#999999" size="40"></u-icon>
					</view>
				</view>
			</u-swipe-action>
		</view>
		<!-- 新建按钮 -->
		<view class="addBtnBox" :style="{paddingBottom:isIphoneX?'76rpx':''}">
			<view class="echatImport" @tap="getAddressChat">
				<u-icon name="weixin-fill" color="#2DC100" size="48"></u-icon>
				<view class="ml24">微信导入</view>
			</view>
			<view class="addAddressBtn" @tap="addAddress">添加新地址</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 手机机型
				modelmes:null,
				isIphoneX:false,
				addressList:[],
				addressListReady:null,
				addressHandle: [
					{
						text: '设为默认',
						style: {
							backgroundColor: '#FF5238'
						}
					}
				],
				// 微信导入地址新增
				addForm: {},
				setDefault:{}
			}
		},
		onShow(){
			this.getAddress()
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			// 判断机型iPhone X的
			this.modelmes = uni.getStorageSync('modelmes');
			if (this.modelmes.search('iPhone X') != -1) {
			   this.isIphoneX = true;
			}
		},
		onPullDownRefresh() {
			this.addressList = [];
			this.getAddress();
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 2000);
		},
		methods: {
			getAddress(){
				// 获取地址列表
				this.apiget('/fun/ship-address/index').then(res =>{
					if(res.data.status == 200 ) {
						var dataRe = res.data.data;
						dataRe.forEach(item => {
							item.handleShow = false;
						})
						this.addressList = dataRe;
						this.addressListReady = 1;
					}
				})
			},
			clickList(index) {
				var _this = this;
				this.addressList[index].handleShow = false;
				this.setDefault = {
					id:this.addressList[index].id,
					is_def:1,
					area_id:this.addressList[index].area_id
				}
				this.apipost('/fun/ship-address/update',this.setDefault).then(res =>{
					if(res.data.status == 200 ) {
						console.log(res.data)
						uni.showToast({
							icon: 'success',
							duration:1000,
							title: '设置成功',
							success: res => {
								setTimeout(function (){
									_this.getAddress()
								}, 1000);
							},
						});
					}
				})
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			openList(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.addressList[index].handleShow = true;
				this.addressList.map((val, idx) => {
					if(index != idx) this.addressList[idx].handleShow = false;
				})
			},
			editAddress(id){
				uni.navigateTo({
					url: './editAddress?id='+id
				});
			},
			addAddress(){
				uni.navigateTo({
					url: './addAddress'
				});
			},
			getAddressChat(){
				var _this = this;
				uni.chooseAddress({
				  success(res) {
					_this.addForm = {
						name:res.userName,
						phone:res.telNumber,
						detail:res.detailInfo,
						is_def:2,
						area_id:'',
						code:res.nationalCode
					}
					var hasAdd = _this.addressList.filter(v => {
						return v.name == res.userName && v.phone == res.telNumber && v.detail == res.detailInfo;
					});
					if(hasAdd.length>0){
						uni.showToast({
							icon: 'none',
							duration:1000,
							title: '地址列表已有该地址'
						});
						return false;
					}
					_this.apipost('/fun/ship-address/create',_this.addForm).then(res =>{
						if(res.data.status == 200 ) {
							uni.showToast({
								icon: 'success',
								duration:1000,
								title: '导入成功',
								success: res => {
									_this.getAddress();
								},
							});
						}
					})
				  }
				})
			}
		}
	}
</script>

<style lang="scss">
	.addressBox{
		min-height: 100%;
		padding-bottom: 110rpx;
		background-color: #F8F8FA;
		
		.addressEach{
			padding: 24rpx 32rpx;
			display: flex;
			background-color: #fff;
			box-shadow: inset 0px -0.5px 0px #ECEEF0;
			
			.addressInfoBox{
				flex: auto;
				color: #333;
				
				.memberName{
					font-size: 32rpx;
					line-height: 48rpx;
					.mr64{
						margin-right: 64rpx;
					}
					
					.addDefailt{
						display: inline-block;
						padding: 0 8rpx;
						margin-left: 32rpx;
						font-size: 22rpx;
						line-height: 32rpx;
						background: #FF5238;
						border-radius: 16rpx;
						color: #fff;

					}
				}
				.addressInfo{
					font-size: 24rpx;
					line-height: 36rpx;
				}
			}
			image{
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
			}
			
			.editBtn{
				padding-left: 40rpx;
				
				.u-icon{
					margin-top: 25rpx;
				}
			}
		}
	}
	.addBtnBox{
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 8rpx 32rpx;
		line-height: 80rpx;
		background-color: #fff;
		
		.echatImport{
			display: flex;
			height: 80rpx;
			padding: 0 32rpx;
			margin-right: 16rpx;
			border: 2rpx solid #ECEEF0;
			box-sizing: border-box;
			border-radius: 42rpx;
			
			.ml24{
				margin-left: 24rpx;
			}
		}
		.addAddressBtn{
			flex: auto;
			height: 80rpx;
			background: #FF5238;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
		}
	}
</style>
